<template>

	<view class="main">
		<image class="ysaimg" style="width: 100%;height: 100vh;position: fixed;top: 0;" src="/static/images/ysxq.png"></image>

		<u-navbar :bgColor="bgColor" :fixed="false" title="个人中心" @rightClick="rightClick" :autoBack="true" :leftIconSize="0"></u-navbar>

		<view class="ysjs row_a_c">

			<!-- <image class="tx" src="/static/images/home.png"></image> -->
			<image class="tx" :src="userInfo.avatar"></image>
			<view>
				<view class="name">{{userInfo.nickname}}</view>
				<!-- <view class="zhiwu center">微信用户</view> -->
			</view>



		</view>

		<view class="infot">

			<view class="info">

				<view class="title">我的权益</view>

				<view class="infowz row_a_c space-between">

					<view class="column_c" @click="toUrl('/pages/zxhd/yyjl')">
						<image class="yyjl" src="/static/images/yyjl.png"></image>
						<view class="yyjlwz">预约记录</view>
					</view>

					<view class="column_c" @click="toUrl('/pages/zxhd/sfjl')">
						<image class="yyjl" src="/static/images/sfjl.png"></image>
						<view class="yyjlwz">收费记录</view>
					</view>

					<view class="column_c" @click="toUrl('/pages/zxhd/bljl')">
						<image class="yyjl" src="/static/images/wdbl.png"></image>
						<view class="yyjlwz">病历记录</view>
					</view>

					<view class="column_c" @click="toUrl('/pages/zxhd/yslist')">
						<image class="yyjl" src="/static/images/wdyy.png"></image>
						<view class="yyjlwz">我的影像</view>
					</view>

				</view>
			</view>

			<view class="infob">

				<view class="row_a_c space-between imte" @click="toUrl('/pages/index/dddh')">
					<view class="row_a_c">
						<image class="jgfb" src="/static/images/jgfb.png"></image>
						<view class="jgfbwa">机构分布</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>

				<view class="row_a_c space-between imte" @click="toUrl('/pages/index/dddh')">
					<view class="row_a_c">
						<image class="jgfb" src="/static/images/lxgh.png"></image>
						<view class="jgfbwa">路线规划</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>


				<view class="row_a_c space-between imte" @click="toUrl('/pages/index/gzgzh')">
					<view class="row_a_c">
						<image class="jgfb" src="/static/images/gzggh.png"></image>
						<view class="jgfbwa">关注公众号</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>


				<view v-if="this.phone" class="row_a_c space-between imte" @click="makePhoneCall()">
					<view class="row_a_c">
						<image class="jgfb" src="/static/images/dhzx.png"></image>
						<view class="jgfbwa">电话咨询</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>

		</view>


	</view>

</template>

<script>
	import api_index from '@/api/index.js';

	export default {
		components: {

		},
		async onLoad(option) {
			console.log(uni.$u.config.v);
		},

		async onShow() {
			this.access_token = uni.getStorageSync('access_token_user');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.userInfo = uni.getStorageSync('userInfobbb');
			}
			}
			this.getServicePhoneFuc();
		},

		data() {
			return {
				access_token: null,
				userInfo: null,
				bgColor: 'rgba(0, 31, 63, 0)',
				phone: null,


			};
		},
		methods: {

			//获取客服热线
			async getServicePhoneFuc() {
				const res = await api_index.getServicePhone();
				if (res.code == 1) {
					this.phone = res.data.phone;
				} else {
					this.$util.msg(res.message);
					return;
				}
			},



			toUrl(url) {
				this.navTo(url);
			},

			//打电话
			makePhoneCall() {

				if (this.phone) {
					uni.makePhoneCall({
						phoneNumber: this.phone,
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function(err) {
							console.error('拨打电话失败', err);
						}
					});
				}

			},


			async getUsersList() {
				const res = await api_users.getUsersList({
					page: 1,
					limit: 10,
					res: 1
				});
				this.usersList = res.data.data;
				this.usersList.forEach(function(value) {
					var per = value.photo_img.split(',');
					value.img = per[0];
				});
			},


		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.ysjs {
		position: absolute;
		top: 250rpx;
		left: 62rpx;

	}

	.name {
		font-weight: 400;
		font-size: 40rpx;
		color: #3D3D3D;
	}

	.pf {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
	}

	.ff {
		font-weight: 500;
		font-size: 32rpx;
		color: #F69739;
	}

	.tx {
		width: 128rpx;
		height: 128rpx;
		border-radius: 200rpx;
		margin-right: 34rpx;
	}

	.zhiwu {
		width: 160rpx;
		height: 40rpx;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		border: 2rpx solid #91F6E8;


		font-size: 24rpx;
		color: #27CCBB;

		margin-top: 20rpx;

	}

	.zc {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 24rpx;
	}

	.infot {
		position: absolute;
		top: 440rpx;
		left: 32rpx;
		width: 686rpx;
	}

	.info {
		min-height: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
		margin-bottom: 30rpx;
	}

	.xian {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.title {
		font-weight: 800;
		font-size: 28rpx;
		color: #3D3D3D;
	}

	.infowz {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-top: 32rpx;
		padding: 0 20rpx;
	}

	.infob {

		min-height: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
	}

	.grjj {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.yyjl {
		width: 64rpx;
		height: 64rpx;
	}

	.yyjlwz {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.jgfb {
		width: 48rpx;
		height: 48rpx;
		margin-right: 32rpx;
	}

	.jgfbwa {
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
	}

	.imte {
		margin-bottom: 48rpx;
	}
</style>